<template>
  <div class="detailSearch-page">
    <div class="header">
      <div class="btn">
        <span class="title">物料搜索</span>
        <el-button
          round
          size="mini"
          type="success"
          icon="el-icon-refresh-right"
        >
        </el-button>
        <el-button round size="mini" type="success" icon="el-icon-document-copy"
          >导入模版</el-button
        >
        <el-button
          @click="onImport"
          round
          size="mini"
          type="success"
          icon="el-icon-document-add"
        >
          导 入
        </el-button>
      </div>
      <div class="form">
        <el-form
          :inline="true"
          :model="searchForm"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item label="物料编码">
            <el-input></el-input>
          </el-form-item>

          <el-form-item label="规格型号">
            <el-input></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="success" plain icon="el-icon-search">
              搜 索
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="btn">
        <el-button round size="mini" type="success" icon="el-icon-check">
          标 &ensp; 记&ensp;
        </el-button>
        <el-button round size="mini" type="success" icon="el-icon-close"
          >取消标记</el-button
        >
        <el-button
          round
          size="mini"
          type="success"
          icon="el-icon-picture-outline"
        >
          挑 图
        </el-button>
        <el-button
          round
          size="mini"
          type="success"
          icon="el-icon-files"
          @click="goPack"
        >
          打 包
        </el-button>
      </div>
    </div>
    <div class="body">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-align="center"
        height="700"
      >
        <el-table-column fixed type="selection" align="center">
        </el-table-column>
        <el-table-column prop="name" label="标记者" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          label="单据号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="zip" label="项目号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="物料编码" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="物料名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="规格型号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="基本单位" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="文件名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="表面处理" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="项目交期" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="申请数量" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="批准数量" width="120" align="center">
        </el-table-column>

        <el-table-column prop="zip" label="备注" width="120" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template v-slot="{ row }">
            <el-button type="warning" plain @click="view(row)" size="small"
              >预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="Excel导入"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="dialogBeforeClose"
    >
      <el-row type="flex" justify="center">
        <div>
          <el-upload
            class="upload-demo"
            drag
            action=""
            :limit="1"
            :file-list="fileList"
            :on-change="handleChange"
            :http-request="uploadRequest"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传elcel文件</div>
          </el-upload>
        </div>
      </el-row>
      <el-row type="flex" justify="end">
        <!-- update:props属性名，值 直接修改 .sync修饰符的属性值 -->

        <el-button size="mini" type="primary" @click="dialogBeforeClose"
          >取消</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFileApi } from "@/api/detailSearch";
export default {
  data() {
    return {
      searchForm: {},
      tableData: [{ zip: 1 }, { zip: 1 }],
      dialogVisible: false,
      fileList: [],
 
    };
  },
  created() {},
  methods: {
    goPack() {
      this.$router.push({
        path: "/pack",
        query: {
          // url的参数, 类似get请求的传参
        },
      });
    },
    onImport() {
      this.dialogVisible = true;
    },
    handleChange(file, fileList) {
      // console.log(fileList);
      // console.log(this.fileList);
      this.fileList = fileList;
    },
    async uploadRequest() {
      const formData = new FormData();
      formData.append("file", this.fileList[0].raw);

      const res = await uploadFileApi(formData);
      console.log(res);
    },
    dialogBeforeClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.detailSearch-page {
  background-color: #fff;

  .header {
    padding: 30px 20px;
    display: flex;
    justify-content: flex-start;

    .btn {
      display: inline-block;
      margin-right: 20px;
      // margin-left: 20px;

      .title {
        padding-top: 7px;
        margin-right: 20px;
      }
    }
    .form {
      display: inline-block;
      margin-right: 20px;
      // margin-left: 20px;

      // ::v-deep .el-form-item__content {
      //   width: 100px;
      // }
    }

    .save-btn {
      display: inline-block;
    }
  }
  .body {
    padding: 20px;
  }
}
</style>